import {EllipsisOutlined, PlusOutlined} from '@ant-design/icons';
import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {ProTable, TableDropdown} from '@ant-design/pro-components';
import {Button, Dropdown, Space, Tag} from 'antd';
import {useRef, useState} from 'react';
import request from 'umi-request';

import Edit from "./Edit";
import Detail from "./Detail";
import Bind from "./Bind";
import Settings from "./Settings";
import Add from "./Add";
import {
    ModalForm,
    ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import {Form, message} from 'antd';
import {chatterDelete, chatterList, deleteModel, updateAccountStatus, updateChatter} from "@/services/chatter";
import UnBind from "@/pages/chatters/UnBind";
import {Popconfirm} from "antd/lib";
import BindModelList from "@/pages/chatters/BindModelList";

export const waitTimePromise = async (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export const waitTime = async (time: number = 100) => {
    await waitTimePromise(time);
};

type GithubIssueItem = {
    url: string;
    id: number;
    number: number;
    title: string;
    labels: {
        name: string;
        color: string;
    }[];
    state: string;
    comments: number;
    created_at: string;
    updated_at: string;
    closed_at?: string;
};
var actionRef = null;
const cancel = (e: React.MouseEvent<HTMLElement>) => {
};
const columns: ProColumns<GithubIssueItem>[] = [
    {
        title: 'CID',
        dataIndex: 'account',
        copyable: true,
        ellipsis: true,
        tip: 'chatter ID',
        hideInSearch: true,
        readonly: true
    },
    {
        title: 'CID',
        dataIndex: 'account',
        copyable: true,
        ellipsis: true,
        hideInTable: true,
        tip: 'chatter ID',
    },
    {
        title: 'Chatter Code',
        dataIndex: 'chatterCode',
        copyable: true,
        ellipsis: true,
        hideInSearch: true,
        hideInTable: true,
        tip: 'ChatterCode'
    },
    {
        title: 'Chatter Name',
        dataIndex: 'nickName',
        copyable: true,
        ellipsis: true,
        hideInSearch: true,
        readonly: true,
        formItemProps: {
            rules: [
                {
                    required: true,
                    message: '此项为必填项',
                },
            ],
        },
    },
    {
        title: 'Chatter Name',
        dataIndex: 'nickName',
        copyable: true,
        ellipsis: true,
        hideInTable: true,
        formItemProps: {
            rules: [
                {
                    required: true,
                    message: '此项为必填项',
                },
            ],
        },
    },
    {
        disable: true,
        title: 'Online',
        dataIndex: 'onlineStatus',
        ellipsis: true,
        hideInTable: true,
        valueType: 'select',
        valueEnum: {
            99: {text: 'All'},
            1: {
                text: 'Online',
                status: 'Success',
            },
            2: {
                text: 'Offline',
                status: 'Error',
            }
        },
    },
    {
        disable: true,
        title: 'Online',
        dataIndex: 'onlineStatus',
        search: false,
        hideInSearch: true,
        readonly: true,
        render: (_, record) => (
            <Space>
                {record.onlineStatus == 1 ? "Online" : "Offline"}
            </Space>
        ),
    },

    {
        title: 'Bind Models Num',
        dataIndex: 'bindModelsCount',
        ellipsis: true,
        hideInSearch: true,
        readonly: true,
        render: (text, record, _, action) => [
            <BindModelList bindModelsCount={record.bindModelsCount} chatterCode={record.chatterCode} reloadTable={() => {
                actionRef.current?.reload()
            }}/>
        ]
    },
    {
        title: 'MID',
        dataIndex: 'modelUserCode',
        ellipsis: true,
        hideInTable: true,
    },

    {
        title: 'Account Status',
        dataIndex: 'status',
        ellipsis: true,
        valueType: 'select',
        hideInTable: true,
        valueEnum: {
            99: {text: 'All'},
            1: {
                text: 'Disabled',
                status: 'warning',
            },
            2: {
                text: 'Enabled',
                status: 'Success',
            }
        },
    },

    {
        title: 'Account Status',
        dataIndex: 'status',
        ellipsis: true,
        valueType: 'select',
        hideInSearch: true,
        valueEnum: {
            1: {
                text: 'Disabled',
                status: 'warning',
            },
            2: {
                text: 'Enabled',
                status: 'Success',
            }
        },
    },

    {
        title: 'Level',
        dataIndex: 'level',
        ellipsis: true,
        readonly: true,
        valueType: 'select',
        // hideInTable: true,
        valueEnum: {
            99: {text: 'All'},
            1: {
                text: 'S',
                status: 's',
            },
            2: {
                text: 'A',
                status: 'a',
            },
            3: {
                text: 'N',
                status: 'n',
            }
        },
    },
    {
        title: 'Job Type',
        dataIndex: 'jobType',
        ellipsis: true,
        valueType: 'select',
        hideInSearch: true,
        valueEnum: {
            1: {
                text: 'Full',
                status: 'Full',
            },
            2: {
                text: 'PartTime',
                status: 'PartTime',
            }
        },
    },
    {
        title: 'Job Type',
        dataIndex: 'jobType',
        ellipsis: true,
        valueType: 'select',
        hideInTable: true,
        valueEnum: {
            99: {
                text: 'All',
                status: 'All',
            },
            1: {
                text: 'Full',
                status: 'Full',
            },
            2: {
                text: 'PartTime',
                status: 'PartTime',
            }
        },
    },

    {
        disable: true,
        title: 'Gender',
        dataIndex: 'gender',
        ellipsis: true,
        hideInSearch: true,
        valueType: 'select',
        readonly: true,
        valueEnum: {
            0: {text: 'unknow'},
            1: {
                text: 'female',
                status: 'Success',
            },
            2: {
                text: 'male',
                status: 'Error',
            }
        },
    },

    {
        title: 'Working Hour',
        dataIndex: 'workingHours',
        ellipsis: true,
        readonly: true,
        hideInSearch: true,
    },

    {
        title: 'Create Date',
        key: 'createDt',
        dataIndex: 'createDt',
        valueType: 'date',
        sorter: true,
        readonly: true,
        hideInSearch: true,
    },
    {
        title: 'Modify Date',
        key: 'modifyDt',
        dataIndex: 'modifyDt',
        valueType: 'date',
        sorter: true,
        readonly: true,
        hideInSearch: true,
    },
    {
        title: 'Last Online Time',
        key: 'lastActiveStr',
        dataIndex: 'lastActiveStr',
        sorter: true,
        readonly: true,
        hideInSearch: true,
    },
    {
        title: 'Actions',
        valueType: 'option',
        key: 'option2',
        render: (text, record, _, action) => [
            <a
                key="editable2"
                onClick={() => {
                    action?.startEditable?.(record.chatterCode);
                }}
            >
                Edit
            </a>,

            <Edit record={record} reloadTable={() => {
                actionRef.current?.reload()
            }}/>
        ],
    },
    {
        title: 'Actions',
        valueType: 'option',
        key: 'option',
        readonly: true,
        editable:false,
        render: (text, record, _, action) => [
            <Bind actionRef={actionRef} chatterCode={record.chatterCode} reloadTable={() => {
                actionRef.current?.reload()
            }}/>,
            <UnBind actionRef={actionRef} chatterCode={record.chatterCode} reloadTable={() => {
                actionRef.current?.reload()
            }}/>
        ],
    },
];

export default () => {
    actionRef = useRef<ActionType>();
    const [form] = Form.useForm<{ name: string; company: string }>();
    const [formEdit] = Form.useForm<{ name: string; company: string }>();
    const [totalCnt,setTotalCnt] = useState(10);
    const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
    const [dataSource, setDataSource] = useState<readonly GithubIssueItem[]>([]);


    return (
        <div>

            <ProTable<GithubIssueItem>
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params) => {
                    let response = await chatterList(params);
                    console.log(11111, params);
                    setTotalCnt(response.totalCount);
                    return {
                        data: response.list == null ? [] : response.list
                    };
                }}

                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                    onChange(value) {
                        console.log('value: ', value);
                    },
                }}
                rowKey="chatterCode"
                search={{
                    labelWidth: 'auto',
                }}
                options={{
                    setting: {
                        listsHeight: 400,
                    },
                }}
                pagination={{
                    pageSize: 30,
                    total:totalCnt,
                    onChange: (page) => console.log(page),
                }}

                onChange={setDataSource}
                editable={{
                    type: 'multiple',
                    editableKeys,
                    onSave: async (rowKey, data, row) => {
                        await updateChatter(data).then((res) => {
                            message.success("Success");
                            actionRef.current?.reload()
                        });
                    },
                    onDelete: async (rowKey, data, row) => {
                        console.log("=========", data)
                        let params = {chatterCode: data.chatterCode}
                        console.log("====", params)
                        await chatterDelete(params).then((res) => {
                            message.success("Success");
                            actionRef.current?.reload()
                        });

                    },
                    onChange: setEditableRowKeys,
                }}

                dateFormatter="string"
                headerTitle="chatters"
                toolBarRender={() => [
                    <Add actionRef={actionRef} reloadTable={() => {
                        actionRef.current?.reload()
                    }}/>
                ]}
            />
        </div>
    );
};